<template>
  <div>
    <h1 style="font-size:25px">预测用户信息填写</h1>
    <br/>
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="借款人姓名">
        <a-input v-model="form.name" placeholder="请输入您的姓名"/>
      </a-form-model-item>
      <a-form-model-item label="借款人年龄">
        <a-input v-model="form.age" placeholder="请输入您的年龄"/>
      </a-form-model-item>
      <a-form-model-item label="无担保信贷额度除以总额度">
        <a-input v-model="form.revolvingRatio" placeholder="请输入您的无担保信贷比值(0-1)"/>
      </a-form-model-item>
      <a-form-model-item label="借款人过去两年逾期在30-59天的次数">
        <a-input v-model="form.thirty" placeholder="请输入您的逾期次数(0,1,2)"/>
      </a-form-model-item>
      <a-form-model-item label="借款人过去两年逾期在60-89天的次数">
        <a-input v-model="form.sixty" placeholder="请输入您的逾期次数(0,1,2)"/>
      </a-form-model-item>
      <a-form-model-item label="借款人已逾期90天以上的次数">
        <a-input v-model="form.ninety" placeholder="请输入您的逾期次数(0,1,2)"/>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
        <a-button type="primary" @click="onSubmit" style="margin-right: 50px"> 提交</a-button>
        <a-button @click="onDemoSubmit"> 样例测试</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal v-model="visible" title="确认使用样例测试？" @ok="handleOk" width="800px">
      <a-descriptions title="待预测人信息" bordered style="text-align: center">
        <a-descriptions-item label="借款人姓名">
          {{ testForm.name }}
        </a-descriptions-item>
        <a-descriptions-item label="借款人年龄">
          {{ testForm.age }}
        </a-descriptions-item>
        <a-descriptions-item label="无担保信贷额度除以总额度">
          {{testForm.revolvingRatio}}
        </a-descriptions-item>
        <a-descriptions-item label="借款人过去两年逾期在30-59天的次数">
          {{testForm.thirty}}
        </a-descriptions-item>
        <a-descriptions-item label="借款人过去两年逾期在60-89天的次数">
          {{testForm.sixty}}
        </a-descriptions-item>
        <a-descriptions-item label="借款人已逾期90天以上的次数">
          {{testForm.ninety}}
        </a-descriptions-item>

      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "mainPage",
  data() {
    return {
      labelCol: {span: 8},
      wrapperCol: {span: 8},
      form: {
        name: "",
        age: "",
        revolvingRatio: "",
        thirty: "",
        sixty: "",
        ninety: ""
      },
      testForm:{
        name: "样例用户",
        age: "34",
        revolvingRatio: "1",
        thirty: "2",
        sixty: "2",
        ninety: "2"
      },
      visible:false,
    }
  },
  methods: {
    onPanelChange(value, mode) {
      console.log(value, mode);
    },
    onSubmit() {
      let self = this;
      if (this.form.name == "" || this.form.age == "" || this.form.revolvingRatio == "" || this.form.thirty == "" || this.form.sixty == "" || this.form.ninety == "") {
        this.$message.error("有信息未填写")
        return;
      }
      this.$message.success("提交成功");
      //指定跳转地址
      localStorage.setItem("session", JSON.stringify(self.form));
      this.$router.push("/result");
      console.log("submit!", this.form);
    },
    onDemoSubmit() {
      this.visible = true;
    },
    handleOk(){
      this.$message.success("样例测试");
      //指定跳转地址
      localStorage.setItem("session", JSON.stringify(this.testForm));
      this.$router.push("/result");
      console.log("submit!", this.testForm);
    }
  },
}
</script>

<style scoped>

</style>